<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<title>Time</title>
	<style>
	*{
		margin:0px;
		padding:0px;
	}
	body{
		background-color: #000;
	}
	/*#canvas1{
		height: :100%;
	}*/
	</style>
	<script src="js/digit.js"></script>
</head>
<body>
	<canvas id="canvas1">Browse not supported</canvas>
	<script>
	//global arguments
	var WindowW=document.documentElement.clientWidth,
	WindowH=document.documentElement.clientHeight,
	Radius1=Math.floor(WindowW*4/5/65)-1,
	MarginT=Math.floor(WindowH/4),
	MarginL=Math.floor(WindowW/10);

	window.onresize=function(){
		startDraw=window.clearInterval(startDraw);
		tiktak=window.clearInterval(tiktak);
		RunTimer();
	}

	//canvas Config
	function RunTimer(){
	WindowW=document.documentElement.clientWidth,
	WindowH=document.documentElement.clientHeight,
	Radius1=Math.floor(WindowW*4/5/65)-1,
	MarginT=Math.floor(WindowH/4),
	MarginL=Math.floor(WindowW/10);

	var canvas1=document.getElementById("canvas1");
	canvas1.width=WindowW;
	canvas1.height=WindowH;
	startDraw=setInterval("render(canvas1.getContext('2d'))",1000);
	tiktak=setInterval("clearColon(canvas1.getContext('2d'))",2000);
	};

	//Draw All digits
	function render (ctx) {
		// setup times
		var date = new Date(); 
		var hour=date.getHours(),
			minute=date.getMinutes(),
			sec=3;
		//Draw time digits
		// console.log(parseInt(hour/10));
		ctx.clearRect(0,0,WindowW,WindowH);
		renderDraw(MarginL,MarginT,parseInt(hour/10),ctx);
		renderDraw(MarginL+15*(Radius1+1),MarginT,parseInt(hour%10),ctx);
		renderDraw(MarginL+30*(Radius1+1),MarginT,10,ctx);
		renderDraw(MarginL+39*(Radius1+1),MarginT,parseInt(minute/10),ctx);
		renderDraw(MarginL+54*(Radius1+1),MarginT,parseInt(minute%10),ctx);
	}

	//Draw One digits
	function renderDraw (x,y,num,ctx) {
			// body...
			ctx.fillStyle="rgb(1,255,94)";
			var i,j;
			for(i=0;i<digit[num].length;i++){
				for(j=0;j<digit[num][i].length;j++){
					if(digit[num][i][j]==1){
						ctx.beginPath();
						ctx.arc(x+2*(Radius1+1)*j,y+2*(Radius1+1)*i,Radius1,0,2*Math.PI);
						ctx.closePath();
						ctx.fill();
					}
			}
		}
	}
	//clear colon
	function clearColon (ctx) {
		ctx.clearRect(MarginL+30*(Radius1+1),MarginT,8*(Radius1+1),20*(Radius1+1));
	}
	RunTimer();
	</script>
</body>
</html>